import React, { useEffect,useState,useContext,createContext,useReducer } from 'react';
import {HashRouter,Route,Link} from 'react-router-dom'
function Count(){
    const [count,setCount] = useState(0);
   
    const {state,dispatch} = useContext(Context);
    useEffect(()=>{
        console.log('count变化了,新值是:'+count,dispatch);
    });
    useEffect(()=>{
        return ()=>{
            console.log('离开了count组件')
        }
    },[])
    return <div>
        <button onClick={()=>{dispatch('sub')}}>---</button>
        <div>{state}</div>
        <button onClick={()=>{dispatch('add')}}>+++</button>
    </div>
}
function About(){
    const obj = useContext(Context)
    useEffect(()=>{
        console.log(obj,'这是默认的值')
    })
    return (
         <Context.Consumer>
             {
                 state=>{
                     console.log(state)
                     return <div>about</div>
                 }
             }
        </Context.Consumer>
    )
       
}
function Hooks(){
    const [state,dispatch] = useReducer((state,action)=>{
        console.log()
        if(action==='add'){
            return state+1
        }else if(action==='sub'){
            return state-1
        }else{
            return state
        }
    },0)
    return <HashRouter>
        <ul>
            <li><Link to='/'>count</Link></li>
            <li><Link to='/about'>about</Link></li>
        </ul>
        <Route path='/about' component={About}></Route>
        <Context.Provider value={{dispatch,state}}>
        <Route path='/' exact component={Count}></Route>

        </Context.Provider>
    </HashRouter>
}
const Context = createContext({aa:1})
export default Hooks;